<!--by ysf-->
<template>
  <div
    class="multi-detail"
    v-if="
      multiDetailData.length > 0 && multiDetailIndex !== -1
    "
  >
    <div class="multi-detail-header">
      <span class="multi-detail-header-left">{{
        multiDetailIndex !== -1
          ? multiDetailData[multiDetailIndex].title || ''
          : ''
      }}</span>
      <div class="multi-detail-header-right">
        <Icon
          class="icon"
          :class="
            multiDetailIndex !== 0 ? 'enable' : 'disable'
          "
          title="上一个"
          name="west"
          font-size="20"
          :color="
            multiDetailIndex !== 0
              ? 'rgba(0, 210, 255, 1)'
              : '#A7BECA'
          "
          @click.native="changeMultiDetailIndex('previous')"
        />
        <Icon
          class="icon"
          :class="
            multiDetailIndex !== multiDetailData.length - 1
              ? 'enable'
              : 'disable'
          "
          title="下一个"
          name="east"
          font-size="20"
          :color="
            multiDetailIndex !== multiDetailData.length - 1
              ? 'rgba(0, 210, 255, 1)'
              : '#A7BECA'
          "
          @click.native="changeMultiDetailIndex('next')"
        />
      </div>
    </div>
    <div class="multi-detail-content">
      <el-scrollbar
        ref="multiDetailScrollBarRef"
        v-if="multiDetailIndex !== -1"
      >
        <div
          class="multi-detail-content-item"
          v-for="(value, name) in multiDetailData[
            multiDetailIndex
          ].detailData"
          :key="name"
        >
          <span class="name">{{ name || '' }}: </span>
          <span class="value">{{ value || '' }}</span>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import Icon from '@/components/icon'

export default {
  name: 'Properties',
  components: {
    Icon
  },
  props: ['multiDetailData', 'multiDetailIndex'],
  mounted() {
    if (
      this.multiDetailData &&
      this.multiDetailData.length
    ) {
      const find = this.multiDetailData.find((item) =>
        Object.keys(item.detailData).some((key) => {
          const lowerCase = key.toLowerCase()
          return lowerCase === 'bim_number'
        })
      )
      if (find) {
        let bimNumber = ''
        Object.keys(find.detailData).forEach((item) => {
          if (item.toLowerCase() === 'bim_number') {
            bimNumber = find.detailData[item]
          }
        })
        this.$bus.$emit('modelSearchCode', bimNumber)
      } else {
        this.$bus.$emit('modelSearchCode', '')
      }
    } else {
      this.$bus.$emit('modelSearchCode', '')
    }
  }
}
</script>

<style scoped lang="scss">
.multi-detail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &-header {
    width: 100%;
    height: 43px;
    padding: 25px 6px 25px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-left {
      font-size: 16px;
      font-weight: 800;
    }

    &-right {
      display: flex;
      align-items: center;

      .icon {
        &.enable {
          cursor: pointer;
        }
        &.disable {
          cursor: not-allowed;
        }
        ::v-deep {
          .svg-icon {
            cursor: inherit;
          }
        }
      }

      &-close {
        padding: 10px;
        font-size: 18px;
        cursor: pointer;
      }
    }
  }

  &-content {
    flex: 1;
    overflow: hidden;
    padding: 16px 25px;

    .el-scrollbar {
      height: 100%;
    }

    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: hidden;

        .el-scrollbar__view {
          height: 100%;
        }
      }
    }

    &-item {
      display: flex;
      align-items: flex-start;

      .name {
        font-size: 14px;
        font-weight: 500;
        color: #d2e6f0;
        min-width: 100px;
        max-width: 100px;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .value {
        flex: 1;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        margin-left: 8px;
      }
    }
  }
}
</style>
